<template>
  <div>
    <h2>审核材料照片</h2>
    <table class="material-table">
      <colgroup>
        <col style="width: 15%;">
        <col style="width: 15%;">
        <col style="width: 30%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
      </colgroup>
      <thead>
      <tr>
        <th>ID</th>
        <th>学员ID</th>
        <th>审核</th>
        <th>操作</th>
        <th>状态</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="material in materials" :key="material.id">
        <td>{{ material.id }}</td>
        <td>{{ material.stu_id }}</td>
        <td>
          <button @click="viewImage(material.front_save_path)" class="view-btn">查看正面</button>
          <button @click="viewImage(material.back_save_path)" class="view-btn">查看反面</button>
        </td>
        <td>
          <button @click="sendBack(material.id)" class="send-back-btn">打回</button>
        </td>
        <td> <!-- 修改这里：添加审核状态按钮 -->
          <button :class="material.passed ? 'pass-btn' : 'failed-btn'" @click="changeStatus(material)">{{ material.passed ? '审核通过' : '审核未通过' }}</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div v-if="imageModalVisible" class="image-modal" @click="closeImageModal">
      <img :src="currentImagePath" class="modal-image">
    </div>
  </div>
</template>

<script>
import './css/Material.css';
import axios from 'axios';

export default {
  name: 'MaterialReview',
  data() {
    return {
      materials: [],
      imageModalVisible: false,
      currentImagePath: ''
    };
  },
  mounted() {
    this.fetchMaterials();
  },
  methods: {
    async fetchMaterials() {
      try {
        const response = await axios.get('http://localhost:8081/material/MaterList');
        this.materials = response.data.data;
      } catch (error) {
        console.error('获取材料列表失败:', error);
      }
    },
    viewImage(path) {
      const imagePath = path ? path.replace(/^D:.*image/, '/image') : '/path/to/default/image.png';
      this.currentImagePath = imagePath;
      this.imageModalVisible = true;
    },
    closeImageModal() {
      this.imageModalVisible = false;
    },
    //打回代码
      async sendBack(materialId) {
        try {
          const response = await axios.delete(`http://localhost:8081/material/deleteMater/${materialId}`);
          if (response.status === 200) {
            this.fetchMaterials();
            this.$message.success('材料已成功打回并删除');
          }
        } catch (error) {
          console.error('删除材料失败:', error);
        }
      },
    //审核状态
    changeStatus(material) {
      this.$message.success('操作成功！');
      material.passed = !material.passed;
    },

  }
};
</script>

<style>

</style>